<script lang="ts" setup>
  import { ref } from "vue";

  const visible = ref(false);
</script>

<template>
  <div class="umrp-cover-view" @mouseenter="visible = !visible" @mouseleave="visible = !visible">
    <slot></slot>
    <div class="layer" v-if="visible">
      <slot name="layer"></slot>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .umrp-cover-view {
    position: relative;

    .layer {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 999;
    }
  }
</style>
